<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>FloatButton6 悬浮按钮</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">类型</a-divider><!-- =============================================================== -->
	<p class="desc">通过 type 改变悬浮按钮的类型。</p>
	<a-float-button @click="handleClick(1)" type="primary" :style="{right: '24px',}">
		<template #icon>
			<question-circle-outlined></question-circle-outlined>
		</template>
	</a-float-button>
	
	<a-float-button @click="handleClick(2)" type="default" :style="{right: '94px',}">
		<template #icon>
			<question-circle-outlined></question-circle-outlined>
		</template>
	</a-float-button>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
methods:{
	handleClick(val){
		console.log('click', val);
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
